<cnsl-filter (resetted)="resetFilter()" (trigger)="emitFilter()" [queryCount]="(filterChanged | async)?.length ?? 0">
  <div class="filter-row" id="filtercomp">
    <div class="name-query">
      <mat-checkbox
        id="state"
        class="cb"
        [checked]="getSubFilter(SubQuery.STATE)"
        (change)="changeCheckbox(SubQuery.STATE, $event)"
        >{{ 'FILTER.STATE' | translate }}
      </mat-checkbox>
      <div class="subquery" *ngIf="getSubFilter(SubQuery.STATE) as sq">
        <span class="nomethod cnsl-secondary-text">
          {{ 'FILTER.METHODS.1' | translate }}
        </span>

        <cnsl-form-field class="filter-select-value">
          <mat-select [value]="sq.getState()" (selectionChange)="setValue(SubQuery.STATE, sq, $event)">
            <mat-option *ngFor="let state of states" [value]="state">
              {{ 'USER.STATE.' + state | translate }}
            </mat-option>
          </mat-select>
        </cnsl-form-field>
      </div>
    </div>

    <div class="name-query">
      <mat-checkbox
        id="displayname"
        class="cb"
        [checked]="getSubFilter(SubQuery.DISPLAYNAME)"
        (change)="changeCheckbox(SubQuery.DISPLAYNAME, $event)"
        >{{ 'FILTER.DISPLAYNAME' | translate }}
      </mat-checkbox>
      <div class="subquery" *ngIf="getSubFilter(SubQuery.DISPLAYNAME) as dnq">
        <cnsl-form-field class="filter-select-method">
          <mat-select [value]="dnq.getMethod()" (selectionChange)="setMethod(dnq, $event)">
            <mat-option *ngFor="let method of methods" [value]="method">
              {{ 'FILTER.METHODS.' + method | translate }}
            </mat-option>
          </mat-select>
        </cnsl-form-field>

        <cnsl-form-field class="filter-input-value">
          <input
            cnslInput
            name="value"
            [value]="dnq.getDisplayName()"
            (change)="setValue(SubQuery.DISPLAYNAME, dnq, $event)"
          />
        </cnsl-form-field>
      </div>
    </div>

    <div class="email-query">
      <mat-checkbox
        id="email"
        class="cb"
        [checked]="getSubFilter(SubQuery.EMAIL)"
        (change)="changeCheckbox(SubQuery.EMAIL, $event)"
        >{{ 'FILTER.EMAIL' | translate }}
      </mat-checkbox>
      <div class="subquery" *ngIf="getSubFilter(SubQuery.EMAIL) as eq">
        <cnsl-form-field class="filter-select-method">
          <mat-select [value]="eq.getMethod()" (selectionChange)="setMethod(eq, $event)">
            <mat-option *ngFor="let method of methods" [value]="method">
              {{ 'FILTER.METHODS.' + method | translate }}
            </mat-option>
          </mat-select>
        </cnsl-form-field>

        <cnsl-form-field class="filter-input-value">
          <input cnslInput name="value" [value]="eq.getEmailAddress()" (change)="setValue(SubQuery.EMAIL, eq, $event)" />
        </cnsl-form-field>
      </div>
    </div>

    <div class="usernane-query">
      <mat-checkbox
        id="username"
        class="cb"
        [checked]="getSubFilter(SubQuery.USERNAME)"
        (change)="changeCheckbox(SubQuery.USERNAME, $event)"
        >{{ 'FILTER.USERNAME' | translate }}
      </mat-checkbox>
      <div class="subquery" *ngIf="getSubFilter(SubQuery.USERNAME) as unq">
        <cnsl-form-field class="filter-select-method">
          <mat-select [value]="unq.getMethod()" (selectionChange)="setMethod(unq, $event)">
            <mat-option *ngFor="let method of methods" [value]="method">
              {{ 'FILTER.METHODS.' + method | translate }}
            </mat-option>
          </mat-select>
        </cnsl-form-field>

        <cnsl-form-field class="filter-input-value">
          <input cnslInput name="value" [value]="unq.getUserName()" (change)="setValue(SubQuery.USERNAME, unq, $event)" />
        </cnsl-form-field>
      </div>
    </div>
  </div>
</cnsl-filter>
